<template>
  <div style="margin-top:20px;" v-loading="state.loading">
    <!-- 标签页 -->

    <el-tabs v-model="state.activeName" v-if="factoryName == 2">
      <el-tab-pane label="合酒信息" name="first">
        <DetailPage ref="detailPage"></DetailPage>
      </el-tab-pane>
      <el-tab-pane label="扫码确认记录" name="second">
        <MyTemp v-if="state.dataSource.length == 0"></MyTemp>

        <div v-else>
          <div class="title" style="font-weight: bold;">扫码确认明细</div>

          <ht-table
            class="ht-table-no-border"
            :data="state.dataSource"
            style="width: 100%; margin-top: 12px"
            border
            highlight-current-row
            :hide-page="true"
            :columns="columns"
          >
            <Temp slot="empty">
              <span slot="tips">暂无数据哦</span>
            </Temp>
            <template slot="beforeStatus" slot-scope="{ row }">
              <span v-if="row.actionType !== 1">
                开启
              </span>
              <span v-else>关闭</span>
            </template>

            <template slot="afterStatus" slot-scope="{ row }">
              <span v-if="row.actionType == 1">
                开启
              </span>
              <span v-else>关闭</span>
            </template>

            <template slot="creatorId" slot-scope="{ row }">
              <ht-select-user v-model="row.creatorId" :readonly="true">
              </ht-select-user>
            </template>

            <template slot="creationTime" slot-scope="{ row }">
              {{ row?.creationTime?.replace('T', ' ').slice(0, 16) }}
            </template>
          </ht-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="验度记录" name="three">
        <CheckRecord></CheckRecord>
      </el-tab-pane>
    </el-tabs>

    <div v-else>
      <DetailPage ref="detailPage"></DetailPage>
    </div>
  </div>
</template>
<script lang="ts">
import CheckRecord from './checkRecord.vue';
import MyTemp from './myTemp.vue';
import { Component, Prop, Vue } from 'vue-property-decorator';
import Temp from '@/components/temp.vue';
import DetailPage from './detailPage.vue';
import { Column } from 'htui-yllkbz/src/packages/type';
import { MixWineOrderApi, MixWineOrderDto } from '@/plugins/api';
import { _axios } from 'vue-kst-auth';
interface State {
  /** 数据状态 */
  loading: boolean;
  activeName: any;
  dataSource: any;
}
@Component({
  components: {
    MyTemp,
    Temp,
    DetailPage,
    CheckRecord,
  },
})
export default class Index extends Vue {
  MixWineOrderApi = new MixWineOrderApi('/alcohol-management', _axios);
  @Prop() factoryName!: any;
  @Prop() selectRow!: MixWineOrderDto;

  /** 数据 */
  state: State = {
    loading: false,
    activeName: 'first',
    dataSource: [],
  };
  /** 生命周期 */
  mounted() {
    // console.log(this.selectRow, '1414');
    this.getby();
  }
  //获取详情
  getby() {
    this.state.loading = true;
    this.MixWineOrderApi.getById2(this.selectRow.id)
      .then((res: any) => {
        (this.$refs.detailPage as any).initData(res);
        // this.state.dataSource = res.containers;

        // 将container中的values 组装新数组
        res.containers.forEach((element: any) => {
          if (element.valves.length == 0) return;

          element.valves.forEach((item: any) => {
            item.outSapName = element.outSapName;
            item.outSapCode = element.outSapCode;
          });

          this.state.dataSource = [...this.state.dataSource, ...element.valves];
        });
      })
      .finally(() => {
        this.state.loading = false;
      });
  }

  /** 方法 */

  /** 监听 */
  get columns(): Column[] {
    return [
      { key: 'outSapName', title: '容器名称' },
      { key: 'outSapCode', title: '容器编号' },
      //
      { key: 'sapName', title: '设备名称' },

      { key: 'sapCode', title: '设备编号' },
      { key: 'beforeStatus', title: '变更前状态' },
      //
      { key: 'afterStatus', title: '变更后状态' },
      //
      { key: 'creatorId', title: '经手人' },
      { key: 'creationTime', title: '变更时间' },
      //
    ];
  }

  /** 计算属性 */
}
</script>
<style lang="scss" scoped></style>
